@include('Home.head')
<style>

	.am-navbar-nav a .am-navbar-label{
		font-size: 14px;
		margin-top: 6px;
	}
	.am-navbar{
		height: 60px;
	}
	.am-header-default{

		/* border-bottom:#F2F2F2 2px solid; */

		background: linear-gradient(180deg,#d2393b 0%, #ab191a 100%);
	}
 .van-sidebar-item--select{
   color:#2B8DFF !important;
   border-color: #2B8DFF !important;
 }
 .van-tree-select__nav-item {
     padding: 17px 0px 17px 0px !important;
     text-align: center !important;
 }
 
 .van-sidebar-item{
 	font-size: 16px;
 }
 
 .img_div_zt{
  /* position: absolute; */
     z-index: 999;
     top: 0;
     width: -webkit-fill-available;
     height: auto;
     margin: 0px 0 0 107px;
     background: white;
 }
 .img_zt{
   width:79px;
     height: 79px;
 	border-radius: 6px;
 }
 .van-tree-select{
   width:107px;
   position: absolute;
 }
 .van-tree-select__content{
   -webkit-box-flex: 0;
     flex: 0;
 }
 .img_div{
   display: inline-block;
     margin: 5px 0;
     /* text-align: center; */
     width: 100%;
     height: 79px;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
 }
 .name_goods{
   font-size:13px;
 font-weight:500;
 line-height:20px;
 color:rgba(51,51,51,1);
 opacity:1;
 }
 .am-navbar{
   opacity: 0.9  !important;
 }
</style>
<body>
<div class="container" id="app">

	<header data-am-widget="header" class="am-header am-header-default">

		<div class="am-header-left am-header-nav">
		    <a  onclick="javascript:history.back(-1);" class="">
		        <i class="am-header-icon am-icon-chevron-left"></i>
		    </a>
		</div>
	    <h1 class="am-header-title">

	        <a href="#title-link" class="" >商品分类</a>

	    </h1>
	</header>
	    <van-tree-select
	      height="auto"
	      :items="items"
	      :main-active-index.sync="active"
		  @click-nav="onNavClick" 
		  style="padding-bottom: 105px;"
	    >
	   
	    </van-tree-select>
		<div class="img_div_zt" v-if="sortDatas==''" style="text-align: center;
		color: #c5c4c4;
		padding-top: 100px;">暂无商品</div>
		    <div class="img_div_zt" v-if="sortDatas!=''">
		      <div  class="img_div"  v-for="index,i in sortDatas" :key="i" @click="cksp(index.id)">
				  <div style="width: 30%;float: left;overflow: hidden;"><img @click="cksp(index.id)" class="img_zt"  :src="index.goods_thumb" alt=""></div>
		        <div style="float: left;width: 65%;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;">
					<span class="name_goods" style="font-size: 16px;">@{{index.goodsname}}</span><br>
					<span class="name_goods" style="color: rgb(82,166,131);font-size: 11px;background-color:rgb(224,245,238);padding: 0px 8px;border-radius: 6px;">好物精选</span><br>
					<span class="name_goods" style="color:rgb(247,131,87); ">￥</span><span class="name_goods" style="color:rgb(247,131,87);font-size: 16px;font-weight: 600; ">@{{index.rulingprice}}</span>
					<span style="float: right;font-size: 10px;color: white;background-color:rgb(247,131,87);padding: 5px 10px;border-radius: 10px;">立即购买</span>
					</div>
		      </div>
		    </div>
			
			<footer data-am-widget="navbar" class="am-navbar am-cf sxy-footer" id="">
			    <ul class="am-navbar-nav am-cf am-avg-sm-4" style="background-color: white;">
			        <li>
			            <a href="/home/excellent/index" class="footer-active">
            <img src="http://qiniu.baoliy168.com/%E7%BB%84%203478%403x.png" alt="首页" />
			                <span class="am-navbar-label">首页</span>
			            </a>
			        </li>
			        <li>
			            <a href="/home/agentBonus/index" class="">
            <img src="http://qiniu.baoliy168.com/%E7%BB%84%208115%403x.png" alt="分类" />
			                <span class="am-navbar-label">分类</span>
			            </a>
			        </li>
			        <li>
			            <a href="/home/member/shopcart" class="">
            <img src="http://qiniu.baoliy168.com/%E7%BB%84%203474%403x.png" alt="购物车"/>
			                <span class="am-navbar-label">购物车</span>
			            </a>
			        </li>
			        <li>
			            <a href="/home/member/index" class="">
            <img src="http://qiniu.baoliy168.com/%E7%BB%84%203475%403x.png" alt="我的" />
			                <span class="am-navbar-label">我的</span>
			            </a>
			        </li>
			    </ul>
			</footer>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            title: '我的资料',
            db: '',
			value:'',
			items: [],
			sortData: {},
			active: 0,
            total: '',
			sortDatas:''
        },
        methods: {
			onNavClick(index) {
			    this.active=index 
			    this.id=this.sortData[index].id
			   $.get("/home/index/getShopGoods",{id:this.id},res=>{
			     if(res.code==1){
			       this.sortDatas=res.data
			     }else{
			       this.sortDatas=''
			     }
			     // console.log(this.sortDatas)
			   })
			   
			},
            //初始化 系统管理员列表
            initialize: function () {
				var _this = this
				$.post("/home/index/top",{'_token':'{{csrf_token()}}',class:'select'},function (res) {
				            
				    if(res.code == 1){
						_this.sortData = res.data
						for (var i = 0; i < _this.sortData.length; i++) {
						    var obj = {};
						    obj.text = _this.sortData[i].name;
						    _this.items.push(obj);
						}
				    } else if(res.code == 0) {
				    }   
				});
				$.post("/home/index/getShopGoods",{'_token':'{{csrf_token()}}',class:'select'},function (res) {
				            
				    if(res.code == 1){
						_this.sortDatas = res.data
				    } else if(res.code == 0) {
				    }   
				});
            },
            getDetails: function (id) {
                // window.location.href = "/shop/member/user/transactionDetails?type="+type+"&id="+id;
                window.location.href = "/home/agentBonus/bonusDetail?id=" + id;
            },
			cksp: function (id) {
			    // window.location.href = "/shop/member/user/transactionDetails?type="+type+"&id="+id;
			    window.location.href = "/home/microShop/microProduct?id=" + id;
			},
            obtain: function (val) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == val) {
                        return pair[1];
                    }
                }
            }
        },
        //自动执行
        mounted: function () {
            this.initialize();
        },
    })
</script>
</html>
